<template>
  <div class="dialog">
    <el-dialog :title="title" :visible.sync="visible" :close-on-click-modal="false" :before-close="closeForm" width="70%"
      top="20vh" destroy-on-close>
      <el-form :model="createForm" label-width="160px" label-suffix=":" class="searchw" ref="createForm">
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="养护套餐名称" prop="name">
              <el-input v-model.trim="createForm.themeName" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="编制门店名称" prop="matAttrCodeb">
              <el-input v-model.trim="createForm.storeName" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="套餐类别" prop="themeType">
              <el-select v-model="createForm.themeType" placeholder="请选择套餐类别" disabled style="width: 100%;">
                <el-option v-for="item in themeTypeList" :key="item.dictItemCode" :label="item.dictItemName"
                  :value="item.dictItemCode" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态" prop="enable">
              <el-select v-model="createForm.enable" placeholder="请选择状态" disabled style="width: 100%;">
                <el-option label="启用" value="1" />
                <el-option label="禁用" value="0" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="是否通用" prop="commonFlag">
              <el-select v-model="createForm.commonFlag" placeholder="请选择是否通用" disabled style="width: 100%;">
                <el-option label="是" value="1" />
                <el-option label="否" value="0" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="适用车型" prop="carType">
              <el-input v-model.trim="createForm.carType" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <detail-table-dialog ref="detail" :templateId="templateId" :carId="this.createForm.carTypeId"
              v-if="destroy"  @ok="modelFormOk"></detail-table-dialog>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import DetailTableDialog from "./DetailTableDialog";
import { getDictionaryItemMap } from "@/api/common";
export default {
  name: "ThemeModelDetailDialog",
  components: { DetailTableDialog },
  data () {
    return {
      title: "",
      createForm: {
        themeName: "",
        storeName: "",
        enable: ""
      },
      themeTypeList: [],
      visible: false,
      templateId: "",
      destroy: true,
    };
  },
  mounted () { },
  methods: {
    edit (val) {
      this.title = "主题明细";
      this.createForm = Object.assign({}, val);
      this.init();
      this.visible = true;
      this.destroy = true;
      this.templateId = val.id;
    },
    init () {
      getDictionaryItemMap({ codeArr: "themeType" }).then((res) => {
        let data = res.data;
        if (data && data.code == 0) {
          this.themeTypeList = data.data.themeType;
        }
      });
    },
    closeForm () {
      this.destroy = false;
      this.visible = false; //关闭对话框
    },
    modelFormOk(){
      this.closeForm();
      this.$emit("ok");
    }
  },
};
</script>

<style scoped></style>
